<template>
	<view>
		<swiper class="swiper-box" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<view class="swiper-item" @click="onClickImg(i)">
					<image :src="item" mode="aspectFill" :style="{backgroundColor:item}" class="swiper-img" />
				</view>
			</swiper-item>
		</swiper>
		<!-- 淘宝 -->
		<view v-if="pagetype=='TB'">
			<view class="goods-info">
				<view class="info-box ">
					<view class="between align price-salse">
						<view class="info-price">
							<text>￥</text>
							<text class="price">{{details.actualPrice}}</text>
							<text class="original-price">￥{{details.originalPrice}}</text>
						</view>
					</view>
					<view class="between" style="align-items: center;flex-wrap: wrap;">
						<view class="flex leftBigBtn">
							<view class="left">可享补贴</view>
							<view class="right">￥{{details.commission}}</view>
						</view>
						<view style="color: #999;">月销:{{details.monthSales}}</view>
					</view>

					<view class="info-name">{{details.title}}</view>
				</view>
			</view>
			<view class="ticketBox" v-if="mylink.couponClickUrl" @click="onGo(mylink.couponClickUrl)">
				<view>￥<text class="prise">{{details.couponPrice}}</text><text style="font-size: 32rpx;">优惠券</text>
				</view>
				<view style="margin-top: 20rpx;max-width: 75%;">
					使用时间：{{`${ details.couponStartTime.substring(0,9)} `}} -
					{{`${ details.couponEndTime.substring(0,9)} `}}</view>
				<view class="ticketBtn flex-center">立即领券</view>
			</view>
			<!-- 商家 -->
			<view class="flex businessBox">
				<view>
					<image :src="details.shopLogo"></image>
				</view>
				<view>
					<view class="name">{{details.shopName}}</view>
					<view class="hint">全网低价 品质保障 无忧售后</view>
				</view>
			</view>
			<view class="">
				<view class="label">宝贝详情</view>
				<view v-if="detailsImg.length!=0" v-for="(img,i) in detailsImg">
					<image :style="{'width':'100vw','height':`${img.height/2}rpx`}" mode="aspectFit" :src="img.img">
					</image>
				</view>
				<view v-if="detailsImg.length==0" v-for="(img,i) in swiperList">
					<image style="width: 100vw;" mode="scaleToFill" :src="img"></image>
				</view>
			</view>
		</view>
		<!-- 京东 -->
		<view v-if="pagetype=='JD'">
			<view class="goods-info">
				<view class="info-box ">
					<view class="between align price-salse">
						<view class="info-price">
							<text>￥</text>
							<text class="price">{{details.actualPrice}}</text>
							<text class="original-price">￥{{details.originPrice}}</text>
						</view>
					</view>
					<view class="between" style="align-items: center;flex-wrap: wrap;">
						<view class="flex leftBigBtn">
							<view class="left">可享补贴</view>
							<view class="right">￥{{details.commission}}</view>
						</view>
						<view style="color: #999;">月销:{{details.inOrderCount30Days}}</view>
					</view>
					<view class="info-name">{{details.skuName}}</view>
				</view>
			</view>
			<view class="ticketBox" @click="onGo(details.link)" v-if="details.link">
				<view>￥<text class="prise">{{details.discount}}</text><text style="font-size: 32rpx;">优惠券</text>
				</view>
				<view style="margin-top: 20rpx;max-width: 75%;">
					使用时间：{{`${ details.useStartTime.substring(0,9)} `}} - {{`${ details.useEndTime.substring(0,9)} `}}
				</view>
				<view class="ticketBtn flex-center">立即领券</view>
			</view>
			<!-- 商家 -->
			<view class="flex businessBox">
				<view>
					<image src="https://wx.2024csnl.com/static/business/jd.png"></image>
				</view>
				<view>
					<view class="name">{{details.shopName}}</view>
					<view class="hint">全网低价 品质保障 无忧售后</view>
				</view>
			</view>
			<view class="">
				<view class="label">宝贝详情</view>
				<view v-for="(img,i) in details.detailImages">
					<image style="width: 100vw;" mode="scaleToFill" :src="img"></image>
				</view>
			</view>
		</view>
		<!-- 拼多多 -->
		<view v-if="pagetype=='PDD'">
			<view class="goods-info">
				<view class="info-box ">
					<view class="between align price-salse">
						<view class="info-price">
							<text>拼团￥</text>
							<text class="price">{{details.minGroupPrice}}</text>
							<text class="original-price">￥{{details.minNormalPrice}}</text>
						</view>
					</view>
					<view class="between" style="align-items: center;flex-wrap: wrap;">
						<view class="flex leftBigBtn">
							<view class="left">可享补贴</view>
							<view class="right">￥{{details.commission}}</view>
						</view>
						<view style="color: #999;">已售:{{details.salesTip}}</view>
					</view>

					<view class="info-name">{{details.goodsName}}</view>
				</view>
			</view>
			<view class="ticketBox" v-if="mylink.shortUrl" @click="onGo(mylink.shortUrl)">
				<view>￥<text class="prise">{{details.couponDiscount}}</text><text style="font-size: 32rpx;">优惠券</text>
				</view>
				<view style="margin-top: 20rpx;max-width: 75%;">
					使用时间：{{`${ details.couponStartTime.substring(0,9)} `}} -
					{{`${ details.couponEndTime.substring(0,9)} `}} </view>
				<view class="ticketBtn flex-center">立即领券</view>
			</view>
			<!-- 商家 -->
			<view class="flex businessBox">
				<view>
					<image src="https://wx.2024csnl.com/static/business/pdd.png"></image>
				</view>
				<view>
					<view class="name">{{details.mallName}}</view>
					<view class="hint">全网低价 品质保障 无忧售后</view>
				</view>
			</view>
			<view class="">
				<view class="label">宝贝详情</view>
				<view v-for="(img,i) in swiperList">
					<image style="width: 100vw;" mode="scaleToFill" :src="img"></image>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="tab-hig">
			<view class="btm-box between align">
				<view class="btm-item">
					<image src="https://wx.2024csnl.com/static/business/home.png" mode="aspectFill" class="btm-hone" />
					<view class="" @click="toHome">首页</view>
				</view>
				<view class="flex align" v-if="pagetype=='TB'">
					<view class="add-shopcar" @click="onShare(mylink.shortUrl,'淘宝',details.title)">分享赚{{details.commission}}
					</view>
					<view class="buy-now" @click="onGo(mylink.itemUrl)">
						购买省￥{{details.commission1}}</view>
				</view>
				<view class="flex align" v-if="pagetype=='JD'">
					<view class="add-shopcar" @click="onShare(mylink.shortUrl,'京东',details.skuName)">分享赚{{details.commission}}
					</view>
					<view class="buy-now" @click="onGo(mylink.shortUrl)">
						购买省￥{{details.commission1}}</view>
				</view>
				<view class="flex align" v-if="pagetype=='PDD'">
					<view class="add-shopcar" @click="onShare(mylink.mobileShortUrl,'拼多多',details.goodsName)">分享赚{{details.commission}}
					</view>
					<view class="buy-now" @click="onGo(mylink.url)">
						购买省￥{{details.commission1}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// import Bignumber from "bignumber.js"
	import {
		getTaoBaoGoodsDetails,
		getJDGoodsDetails,
		getWeiPinHuiGoodsDetails,
		getPDDGoodsDetails
	} from "@/api/index.js"
	export default {
		data() {
			return {
				mylink: {}, //转链后的数据
				detailsImg: [], //详情列表
				swiperList: [],
				details: {},
				goodsId: '',
				pagetype: '',
			}
		},
		onLoad(opt) {
			this.goodsId = opt.goodsId
			this.pagetype = opt.pagetype
			switch (true) {
				case this.pagetype == 'TB':
					this.onGetTaoBaoGoodsDetails()
					break;
				case this.pagetype == 'JD':
					this.onGetJDGoodsDetails()
					break;
				case this.pagetype == 'WPH':
					this.onGetWPHGoodsDetails()
					break;
				case this.pagetype == 'PDD':
					this.onGetPDDGoodsDetails()
					break;
			}
			console.log(this.pagetype)
		},
		methods: {
			toHome(){
				$toPage(getApp().globalData.HOME_PAGE)
			},
			// 拼多多详情
			async onGetPDDGoodsDetails() {
				const res = await getPDDGoodsDetails('s=/ApiDataokeGoods/pdddetail', {
					goodsSign: this.goodsId
				})
				const {
					msg,
					status,
					data
				} = res.data
				if (status == 1) {
					this.details = data
					this.mylink = data.mylink
					this.swiperList = this.details.goodsGalleryUrls
					console.log(data, "dd", this.details, this.mylink.mobileShortUrl)
				} else {
					this.showToast(msg)
				}
			},
			// 唯品会详情-未对接
			async onGetWPHGoodsDetails() {
				const res = await getWeiPinHuiGoodsDetails('s=/ApiDataokeGoods/wphdetail', {
					goodsIdList: [this.goodsId]
				})
				const {
					msg,
					status,
					data
				} = res.data
				if (status == 1) {
					// this.details = data[0]
					// this.mylink = data.mylink
					// this.swiperList = this.details.smallImages
					// console.log(data, "dd", this.details)
				} else {
					this.showToast(msg)
				}
			},

			// count(one, two) {
			// 	return Bignumber(one).minus(two).toNumber()
			// },
			onShare(url, name,title) {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: `  ${title}
					复制链接${url}打开${name}搜索`,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			onGo(link) {
				let url = encodeURIComponent(link)
				// let url = encodeURIComponent(JSON.stringify(link))
				this.onSkip(`/business/pages/business_tab/tkDetails?url=${url}`)
			},
			// 京东详情
			async onGetJDGoodsDetails() {
				const res = await getJDGoodsDetails('s=/ApiDataokeGoods/jddetail', {
					skuIds: this.goodsId
				})
				const {
					msg,
					status,
					data
				} = res.data
				if (status == 1) {
					this.details = data[0]
					this.mylink = data.mylink
					this.swiperList = this.details.smallImages
					// console.log(data, "dd", this.details)
				} else {
					this.showToast(msg)
				}
			},
			// 淘宝详情
			async onGetTaoBaoGoodsDetails() {
				const res = await getTaoBaoGoodsDetails('s=/ApiDataokeGoods/detail', {
					goodsId: this.goodsId
				})
				const {
					msg,
					status,
					data
				} = res.data
				if (status == 1) {
					this.details = data
					this.swiperList = data.imgs.split(',')
					this.mylink = this.details.mylink
					this.details.detailPics != '' ? this.detailsImg = JSON.parse(this.details.detailPics) : this
						.detailsImg = []
					// console.log(this.mylink, "this.mylink")
					// console.log(data, "dd", this.detailsImg)
				} else {
					this.showToast(msg)
				}
			},
			// 放大轮播图
			onClickImg(i) {
				this.previewImage(i, this.swiperList)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.businessBox {
		padding: 30rpx;
		border-top: 30rpx solid #F7F7F7;
		border-bottom: 30rpx solid #F7F7F7;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}

		.name {
			font-size: 32rpx;
			font-weight: 500;
		}

		.hint {
			color: #999999;
			font-size: 26rpx;
			margin-top: 40rpx;
		}
	}

	.leftBigBtn {
		color: rgb(231, 204, 134);
		font-size: 18rpx;
		margin: 15rpx 15rpx 15rpx 0;


		.left {
			padding: 10rpx;
			background: rgb(50, 60, 69);
			border-radius: 15rpx 0 0 15rpx;
		}

		.right {
			padding: 10rpx;
			border-radius: 0 15rpx 15rpx 0;
			color: #fff;
			background: rgb(240, 121, 5);
		}
	}

	.ticketBox {
		margin: 30rpx;
		background: linear-gradient(90deg, #FF9800, #F44336);
		padding: 30rpx;
		color: #FFF;
		font-size: 28rpx;
		border-radius: 30rpx;
		position: relative;

		.prise {
			font-size: 50rpx;
			font-weight: bold;
			margin: 0 5rpx;
		}

		.ticketBtn {
			width: 150rpx;
			position: absolute;
			right: 40rpx;
			top: 40%;
			background: #fff;
			border-radius: 30rpx;
			padding: 10rpx 0;
			color: #C42C56;
			font-size: 30rpx;
		}
	}

	.swiper-box,
	.swiper-item,
	.swiper-img {
		width: 100%;
		height: 400rpx;
	}

	.goods-info {
		padding: 20rpx;
		background-color: #F7F7F7;

		.info-box {
			padding: 16rpx 20rpx;
			border-radius: 20rpx;
			background-color: #FFF;

			.price-salse {
				font-size: 24rpx;
				color: #999999;
			}

			.info-price {
				color: #FF0404;
			}

			.price {
				font-size: 40rpx;
				font-weight: bold;
			}

			.original-price {
				color: #999999;
				text-decoration: line-through;
				margin-left: 8rpx;
			}

			.info-name {
				font-size: 27rpx;
				margin-top: 16rpx;
			}
		}
	}

	.label {
		line-height: 80rpx;
		padding: 0 30rpx;
	}

	.btm-box {
		padding: 8rpx 40rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;

		.btm-item {
			font-size: 22rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				display: block;
				margin: 0 auto;
			}
		}

		.add-shopcar,
		.buy-now {
			line-height: 80rpx;
			font-size: 27rpx;
			width: 232rpx;
			text-align: center;
			background-color: #FE8E06;
			color: #FFF;
		}

		.add-shopcar {
			border-radius: 40rpx 0 0 40rpx;
		}

		.buy-now {
			background-color: #41644A;
			color: #FFF;
			border-radius: 0 40rpx 40rpx 0;
			// border-radius: 40rpx;
		}
	}

	.pop-box {
		background-color: #FFF;
		padding: 30rpx 20rpx;
		height: 40vh;
		overflow-y: auto;

		.goods-img-pop {
			border-radius: 10rpx;
			background-color: #F5F5F5;
			width: 147rpx;
			height: 147rpx;
			margin-right: 30rpx;
		}

		.goods-name-pop {
			font-size: 30rpx;
		}

		.close-icon {
			width: 24rpx;
			height: 24rpx;
		}

		.goods-price-pop {
			color: #F41717;
		}

		.tag-label {
			font-size: 27rpx;
			margin-top: 64rpx;
		}

		.g-tag {
			display: inline-block;
			font-size: 24rpx;
			line-height: 48rpx;
			padding: 0 24rpx;
			background-color: #F7F7F7;
			border-radius: 8rpx;
			margin: 20rpx 0;
			margin-right: 32rpx;
		}

		.tagActive {
			background: #41644A;
			color: #FFF;
		}

		.tag-iconbox {
			justify-content: flex-end;

			.tag-box {
				width: 47rpx;
				height: 47rpx;
				border: 1rpx solid #E6E6E6;
				text-align: center;
			}

			.tag-num {
				width: 65rpx;
				text-align: center;
				border-top: 1rpx solid #E6E6E6;
				border-bottom: 1rpx solid #E6E6E6;
				line-height: 47rpx;
			}

			.tag-icon {
				width: 27rpx;
				height: 27rpx;
				margin-top: 10rpx;
			}
		}

		.confirm-btn {
			position: fixed;
			bottom: 30rpx;
			width: 95vw;
			background-color: #41644A;
			color: #FFF;
			margin-top: 56rpx;
		}
	}

	.selectBtn {
		color: #F41717;
	}
</style>
